<script setup lang="ts">
import { ref } from "vue";
import type { DefineComponent } from "vue";
import { componentList } from "@/components/mobilePage/index";
import * as _ from "lodash-es";
import { nanoid } from "nanoid";
import draggable from "vuedraggable";

defineOptions({
  name: "left",
});

interface ComponentItem {
  name: string;
  component: DefineComponent;
  type: number; // 根据实际情况调整
  cname?: string;
}

// 左侧菜单
const leftMenu = ref<
  {
    title: string;
    list: ComponentItem[];
    isOpen: boolean;
    type: number;
  }[]
>([]); // 存储分类结果

const categorizeComponents = () => {
  const categories = [
    {
      title: "基础组件",
      list: [] as ComponentItem[],
      isOpen: true,
      type: 0,
    },
    {
      title: "营销组件",
      list: [] as ComponentItem[],
      isOpen: true,
      type: 1,
    },
    {
      title: "工具组件",
      list: [] as ComponentItem[],
      isOpen: true,
      type: 2,
    },
  ];
  componentList.forEach((component) => {
    const category = categories.find((cat) => cat.type === component.type);
    if (category) {
      category.list.push(component);
    }
  });
  leftMenu.value = categories;
};

const addDom = (element: HTMLElement, type: Number) => {
  // 使用 element 代替原 this 上下文
  const component = componentList.find((item) => item.type === type);
  if (component) {
    console.log(element);
  }
};
const cloneDog = (item: any) => {
  return { ...item, id: nanoid() }; // 使用新ID防止冲突
};
</script>

<template>
  <div>test</div>
</template>

<style lang="scss" scoped></style>
